import './projectAlbumDetail.scss';
/*eslint-disable */
@Inject('$log', '$scope', 'projectAlbumService', '$stateParams', '$timeout')
class projectAlbumDetailController {
  constructor() {
    this.view = {
      boxSize: {},
      BoxStyleList: [],
      boxContainerStyle: {},
      orgTypes: [
        {
          name: '查看所有',
          type: '',
          selected: true,
        },
        {
          name: '建设单位',
          type: 1,
        },
        {
          name: '监理单位',
          type: 2,
        },
        {
          name: '施工单位',
          type: 3,
        },
      ],
    };

    this.requestParam = {
      mapParams: {
        classifyId: $stateParams.id,
       // orgId: this.selectBid.orgId,
      },
    };

    this.resource = {
      boxes: [],
    };

    $scope.$watch('vm.selectBid', (newValue) => {
      if (newValue) {
        this.requestParam.mapParams.orgId = newValue.orgId;
      }
    });

    this._init();
  }

  _init() {
    this.selectText = '上传单位';
    this.$fetch();
    this.$scope.$watch('vm.requestParam.mapParams', (newVal, oldVal) => {
      if (newVal !== oldVal) {
        this.$fetch();
      }
    }, true);

    const onWindowResize = () => {
      this.view.timer = this.$timeout(() => {
        this._createBoxStyleList();
        this.$scope.$apply();
      });
    };

    window.addEventListener('resize', onWindowResize);
    this.$scope.$on('$destroy', () => {
      window.removeEventListener('resize', onWindowResize);
      if (this.view.timer) {
        this.$timeout.cancel(this.view.timer);
      }
    });
  }

  _measureBoxSize() {
    const scrollBarWidth = 20;
    const ratio = 1.184466;
    const ulWidth = $('ul.album-boxes')[0].clientWidth;
    const boxWidth = parseInt((ulWidth - 60 - scrollBarWidth) / 4, 10);
    const boxHeight = parseInt(boxWidth / ratio, 10);

    this.view.boxSize = { boxWidth, boxHeight };
    return { boxWidth, boxHeight };
  }

  _positionMeasure($index) {
    const ALBUM_MARGIN_TOP = 40;
    const BOX_VER_SPACE = 20;
    const BOX_HORI_SPACE = 20;
    const IMAGE_PER_ROW = 4;
    const baseStyle = {
      position: 'absolute',
    }
    const mutatedStyle = {
      left: '',
      width: '',
      top: '',
    }
    const { boxWidth, boxHeight } = this.view.boxSize;
    const row = parseInt($index / 4, 10);
    const order = $index % 4;

    mutatedStyle.left = `${order * (boxWidth + BOX_HORI_SPACE)}px`;
    mutatedStyle.width = `${boxWidth}px`;
    mutatedStyle.height = `${boxHeight}px`;
    mutatedStyle.top = `${row * (boxHeight + BOX_VER_SPACE) + ALBUM_MARGIN_TOP}px`;
    return Object.assign(baseStyle, mutatedStyle);
  }

  _createBoxStyleList() {
    this._measureBoxSize();
    this.view.BoxStyleList = [];
    this.resource.boxes.forEach((...args) => {
      const style = this._positionMeasure(args[1]);
      this.view.BoxStyleList.push(style);
    });

    const row = parseInt((this.resource.boxes.length - 1) / 4, 10) + 1;
    this.view.boxContainerStyle = {
      height: `${row *  (this.view.boxSize.boxHeight + 20) + 40}px`,
    }
  }

  $fetch() {
    this.projectAlbumService
      .query(this.requestParam)
      .then((res) => {
        this.resource.boxes = res.rows;

        this._createBoxStyleList();
      });
  }

  changeOrgType(org) {
    this.view.orgTypes.forEach((orgType) => {
      orgType.selected = false;
      if (orgType === org) {
        org.selected = true;
        this.requestParam.mapParams.orgType = org.type;
      }
    });
    this.selectText = org.name;
  }

  getOrgName(type) {
    let typeNumber = parseInt(type, 10);
    return this.view.orgTypes[typeNumber].name;
  }

  popLargeImg(box) {
    this.view.showModal = true;
    this.view.activeBox = box;
  }

  close() {
    this.view.showModal = false;
  }
}

export default projectAlbumDetailController;

